<template>
  <div>
    <el-form :inline="true" :model="formInline" :rules="rules" ref="elForm"  class="demo-form-inline">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="formInline.name" placeholder="姓名" type="text"></el-input>
  </el-form-item>
  <el-form-item label="年龄" class="agelaber" prop="age">
    <el-input class="age" v-model="formInline.age" placeholder="年龄" type="number" ></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="sex">
    <el-select v-model="formInline.sex" placeholder="性别" class="sexlaber">
      <el-option label="男" value="shanghai"></el-option>
      <el-option label="女" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  
    <el-form-item label="出生日期" prop="brith">
     <div class="block">
    <el-date-picker
      v-model="formInline.brith"
      format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </el-form-item>
  <el-form-item label="地址" class="adress" prop="addr">
    <el-input v-model="formInline.addr" placeholder="地址" ></el-input>
  </el-form-item>
</el-form>

  </div>
</template> 
<script>
// import moment from 'moment'
export default {
  name: "CommonForm",
  props: {
    formLabel: Array,
    form: Object,
    inline: Boolean,
  },
   data() {
    const validateAge = (rule,value,callback)=>{
      if(value>180){
        return callback(new Error('年龄不能超过180，请正确输入年龄！'))
      }
    }
    const validateName = (rule,value,callback) =>{
      const reg = /^[\u4e00-\u9fa5]{2,12}$/
      if(!reg.test(value)){
        return callback(new Error('只能为中文，并且长度为2-12'))
      } 
    }
      return {
        value1:'',
        formInline: {
          name: '',
          age: '',
          sex:'',
          brith: '',
          addr:''
        },
        rules:{
          name:[
             { required: true, message: '姓名不能为空',trigger:'change'},
            { validator: validateName, trigger:'blur'}
          ],
          age: [
            { required: true, message: '年龄不能为空',trigger:'change'},
            { validator: validateAge, trigger: 'blur'}
          ],
          sex:[
            // {validator:validateSex,trigger:'blur'},
             { required: true, message: '性别不能为空',trigger:'change'},
          ],
          brith:[
            // {validator:validateDeidata,trigger:'blur'},
             { required: true, message: '出生日期不能为空',trigger:'change'},
          ],
          addr:[
            // { validator: validateAddress, trigger: 'blur'},
             { required: true, message: '地址不能为空',trigger:'change'},
          ]
        }
      }
    },
    // filters: {
    //   filterTime(v){
    //    let a = moment(v,"YYYY MMM DD")
    //    console.log(a)
    //   }
    // },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
       onvalidatorFrom(){
        // eslint-disable-next-line no-debugger
        // debugger
        // console.log('oo');
      //   this.$refs.elForm.validate(async (a,b)=>{
      //     console.log(a);
      //  })
      // 按需进行校验
      let list = []
      this.$refs.elForm.validateField(['name','age','sex','deidata','address'],
        (valid) => {
           list.push(valid)
        })
        if(list.every(item => item==='')){
          console.log(true);
          return this.$emit('event-validate', true,this.formInline)
        }
        return this.$emit('event-validate', false,this.formInline)
      }
    }
    
};
</script>     
<style scoped>
.dataclass{
  display: flex;
  justify-content: space-between;
}
.sexlaber{
  width: 206px;
}
.agelaber{
  margin-left: 27px;
  
}
.age{
    width: 220px;
  }
.demo-form-inline{
  padding: 0px 50px;
}
</style>  
